<template>
  <div class="customerPickingDetailed">
    <div class="customer-title">
      {{cloudShopName}}
    </div>
    <!-- 选择时间部分 -->
    <div class="Date-view">
      <div class="date-view-box start-date" @click="openDateDialog(1)">
        <div class="label">开始时间</div>
        <div class="time">{{startDate_text}}</div>
      </div>
      <div class="date-view-box" @click="openDateDialog(2)">
        <div class="label">截止时间</div>
        <div class="time">{{endDate_text}}</div>
      </div>
    </div>
    <!-- 列表部分 -->
    <div class="picking-dataList">
      <div class="carInfo">
        <div class="left">
          <img class="logo" :src="carAutoDetail.auto_logo" alt="">
        </div>
        <div class="right">
          <span class="oneText">{{carAutoDetail.auto_text}}</span>
          <div class="twoText">
            <div class="vin">
              {{carAutoDetail.vin_code}}
            </div>
            <div @click="goPrecisionReplenish" v-if="memberRole == 'Owner' || memberRole == 'Admin'" class="replenishmentBtn" style="color: #4084EA;">
              精准补货
            </div>
          </div>
        </div>
      </div>
      <div class="groupList">
        <div class="groupItem" v-for="(oneDetail, detail_index) in pickingList" :key="detail_index">
          <div class="time">{{oneDetail.pickingDate}}</div>
          <div class="groupItem_info">
            <div class="header">
              <div class="one com_view">商品信息</div>
              <div class="two com_view">领料数</div>
              <div class="three com_view">单价</div>
              <div class="four com_view">领料人</div>
            </div>

            <div class="grounp" v-for="(item, index) in oneDetail.partItems" :key="index">
              <div class="one com_view">
                <div class="one_top">
                  <div class="brandName">
                    {{item.brandName}}
                  </div>
                  <b class="carDetail" @click.stop='on_partInfo_click(item)'>
                    {{item.displayPartsNo}}
                  </b>
                </div>
                <div class="lusir-kuwei" v-if="item.storeHouse">
                  <span style="color: #bcbcbc;" class="label">库位：</span>
                  <span style="color: #181818;">{{item.storeHouse}}</span>
                </div>
              </div>
              <div :class="item.pickingQty<0 ? 'two red' : 'two'" class="com_view">
                {{item.pickingQty}}
              </div>
              <div class="three com_view" style="color:#e74c3c">¥{{item.price}}</div>
              <div class="four" style="color: #5b5b5b;">{{item.pickingUser}}</div>
            </div>
            <div class="total">
              合计：
              <span class="text">¥{{oneDetail.totalPrice}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <partItemDetailDialog v-if="partItemDetailDialog_launched" :shopDetail_input="partItemDetailDialog_input" :shopDetail_mode="partItemDetailDialog_initMode" @close="on_partItemInfoDialog_close">
    </partItemDetailDialog>

    <van-overlay :show="isShowdateTimePickerDialog" @click.stop="isShowdateTimePickerDialog = false">
      <div class="dateTimePicker-view" v-if="isShowdateTimePickerDialog" @click.stop="comReturnFn">
        <van-datetime-picker title="选择年月日" @cancel="isShowdateTimePickerDialog = false" @confirm="selectDateFn" type="date" :value="currentDate" :formatter="formatter" />
      </div>
    </van-overlay>
  </div>

</template>

<script>
import { Overlay } from "vant";
import partItemDetailDialog from "../components/partItemDetailDialog";
import { mapState, mapGetters } from "vuex";
export default {
  data() {
    return {
      currentDate: new Date(),
      formatter(type, value) {
        if (type === "year") {
          return `${value}年`;
        } else if (type === "month") {
          return `${value}月`;
        }
        return value;
      },
      isShowdateTimePickerDialog: false,
      judgeTime: "", // 开始时间最大选择当天
      startTime: "", // 开始时间
      endTime: "", // 截止时间
      cloudShopName: "", // 云店名称
      carAutoDetail: {}, // 车型信息
      pickingList: [], //
      openDateDialogType: 0, // 1是开始时间  2是结束时间
      vinCode: "",
      customerTeamId: this.$com_util.getQueryString("customerTeamId"),
      memberRole: "", //IM群成员角色 Owner:群主 Admin:管理员
      startDate: "", // 开始时间
      endDate: "", // 截止时间
      startDate_text: "", // 开始时间 【只用作渲染】
      endDate_text: "", // 结束时间 【只用作渲染】

      partItemDetailDialog_launched: false, // 是否启动商品详情的弹层组件
      partItemDetailDialog_initMode: "", // 启动商品详情弹层的模式 partItemInfo：商品详情 partItemFitAuto：车型适配
      partItemDetailDialog_input: {}, // 启动商品详情弹层的 入参\
      cloudShopId: 0,
    };
  },
  computed: {
    ...mapState({
      // 获取个人信息
      myInfo: (state) => {
        return state.user.myInfo;
      },
      groupProfile: (state) => {
        return state.conversation.currentConversation.groupProfile;
      },
    }),
    ...mapGetters(["imGroupCode"]),
  },
  created() {
    this.vinCode = this.$route.query.vin || "";
    this.startDate =
      this.$route.query.startDate ||
      this.$com_util.getNowDateTime(new Date(), 1);
    this.endDate =
      this.$route.query.endDate || this.$com_util.getNowDateTime(new Date(), 1);
    this.getViewDateFn(this.startDate, this.endDate); // 获取页面上展示的开始时间和截止时间

    // 有没有customerTeamId的情况判断
    if (!this.customerTeamId) {
      this.getServiceNeedID(); // 智能取得IM群信息
    } else {
      this.getReplenishmentPickingDetailByAuto(); // 取指定车型的领料明细
    }
  },
  components: {
    partItemDetailDialog,
  },
  methods: {
    //前往精准补货
    goPrecisionReplenish() {
      // wx.navigateTo({
      //   url: `/subpackage_zhipei/pages/precisionReplenish/precisionReplenish?vin=${this.vinCode}&teamid=${this.customerTeamId}`,
      // });
    },
    comReturnFn() {
      return;
    },
    // 智能取得IM群信息
    async getServiceNeedID() {
      const res = await this.$appServive({
        url: "/IM/SmartGetIMGroup",
        data: {
          imGroupCode: this.imGroupCode,
        },
      });
      this.customerTeamId = res.customerTeamId;
      this.getReplenishmentPickingDetailByAuto(); // 取指定车型的领料明细

    },
    // 获取页面上展示的开始时间和截止时间
    getViewDateFn(startDate, endDate) {
      if (startDate) {
        let now_timeStamp = this.$com_util.dateToTimeStamp(startDate);
        this.startDate_text = this.$com_util.getNowDateTime(now_timeStamp, 2);
      } else {
        let nowDate = this.$com_util.getNowDateTime(new Date(), 1);
        let now_timeStamp = this.$com_util.dateToTimeStamp(nowDate);
        this.startDate_text = this.$com_util.getNowDateTime(now_timeStamp, 2);
      }
      if (endDate) {
        let now_timeStamp = this.$com_util.dateToTimeStamp(endDate);
        this.endDate_text = this.$com_util.getNowDateTime(now_timeStamp, 2);
      } else {
        let nowDate = this.$com_util.getNowDateTime(new Date(), 1);
        let now_timeStamp = this.$com_util.dateToTimeStamp(nowDate);
        this.endDate_text = this.$com_util.getNowDateTime(now_timeStamp, 2);
      }
    },
    // 取经销商名称
    async getSimpleShopInfo(cloudShopId) {
      const res = await this.$appServive({
        url: "/CloudShop/GetSimpleShopInfo",
        data: {
          cloudShopId: cloudShopId,
        },
      });
      this.cloudShopName = res.cloudShopName;
    },
    // 取指定车型的领料明细
    async getReplenishmentPickingDetailByAuto() {
      const res = await this.$appServive({
        url: "/Replenishment/GetReplenishmentPickingDetailByAuto",
        data: {
          vinCode: this.vinCode,
          startDate: this.startDate,
          endDate: this.endDate,
          customerTeamId: this.customerTeamId,
        },
      });

      this.cloudShopId = res.cloudShopId;
      this.getSimpleShopInfo(this.cloudShopId); // 取经销商名称
      this.carAutoDetail = res.autoDetail;
      this.pickingList = res.details;
      this.pickingList.forEach((element) => {
        element.pickingDate = this.$com_util.getNewDate(
          element.pickingDate,
          2
        );
        element.totalPrice = element.totalPrice.toFixed(2);
        element.partItems.forEach((e) => {
          e.price = e.price.toFixed(2);
        });
      });

    },
    on_partInfo_click(item) {

      this.partItemDetailDialog_launched = true;
      this.partItemDetailDialog_initMode = "partItemInfo";
      this.partItemDetailDialog_input.shopId = this.cloudShopId;
      this.partItemDetailDialog_input.partItemId = item.partItemId;

    },
    // 关闭弹层
    on_partItemInfoDialog_close() {
      this.partItemDetailDialog_launched = false;
    },
    // 选择日期控件
    selectDateFn(value) {
      let data = value;
      let serviceDate = this.$com_util.getNowDateTime(data, 1); // 给服务端传的时间格式
      let viewDate = this.$com_util.getNowDateTime(data, 2); // 页面展示的时间格式
      if (this.openDateDialogType == 1) {
        this.startDate = serviceDate;
        this.startDate_text = viewDate;
      } else {
        this.endDate = serviceDate;
        this.endDate_text = viewDate;
      }
      this.getReplenishmentPickingDetailByAuto();
      this.isShowdateTimePickerDialog = false;
    },
    // 打开日期控件
    openDateDialog(type) {
      console.log("type", type);
      this.openDateDialogType = type;
      if (type == 1) {
        console.log("this.startDate", this.startDate);
        let now_timeStamp = this.$com_util.dateToTimeStamp(this.startDate);
        // console.log('now_timeStamp', now_timeStamp);

        // this.currentDate = now_timeStamp;
      } else {
        let now_timeStamp = this.$com_util.dateToTimeStamp(this.endDate);
        // this.currentDate = now_timeStamp;
      }
      this.isShowdateTimePickerDialog = true;
    },
  },
};
</script>


<style lang='stylus' scoped>
.picking-dataList
  margin-top 0.4rem
.groupList
  height calc(100vh - 4.77rem)
  // display flex
  width 100%
  // flex-direction column
  overflow-x hidden
  overflow-y auto
  .groupItem
    // display flex
    width 100%
    // flex-direction column
  .time
    display flex
    width 100%
    padding 0.27rem 0.13rem
    justify-content center
    font-size 0.32rem
    background-color #ffffff
    opacity 0.54
    color #a0b0c5
  .groupItem_info
    // display flex
    width 100%
    background #fff
    // flex-direction column
    // align-items center
    .header
      border-bottom 1px solid #ebebeb
      height 1rem
      font-size 0.32rem
      color #bcbcbc
      display flex
      width 100%
      padding 0 0.21rem
      box-sizing border-box
      align-items center
    .total
      display flex
      width 100%
      padding 0.27rem 0.32rem
      justify-content flex-end
      border-top 1px solid #ddd
      font-size 0.32rem
      position relative
      box-sizing border-box
      align-items center
      .text
        color #282828
        font-weight bold
    .grounp
      display flex
      width 100%
      align-items center
      padding 0.4rem 0.21rem
      box-sizing border-box
      border-bottom 1px solid #ebebeb
      .com_view
        float left
        line-height 0.48rem
        color #5b5b5b
    .one
      float left !important
      width 40%
      font-size 0.36rem
      display flex
      align-items center
      .brandName
        margin-right 0.16rem
      .carDetail
        float none
        color #4084EA
    .two
      width 22%
      justify-content center
      font-size 0.36rem
      text-align center
    .three
      width 18%
      justify-content center
      font-size 0.36rem
      text-align center
    .four
      width 20%
      justify-content center
      font-size 0.36rem
      text-align center
      .red
        color #e74c3c
.carInfo
  display flex
  width 100%
  align-items center
  background #fff
  padding 0.21rem 0.4rem
  box-sizing border-box
  .left
    width 1.2rem
    height 1.2rem
    border-radius 0.13rem
    margin-right 0.27rem
    border 1px solid #bcbcbc
    .logo
      width 100%
      height 100%
  .right
    flex-direction column
    // flex-wrap wrap
    align-items flex-end
    font-size 0.37rem
    height 1.25rem
    justify-content space-between
    flex 1
    .oneText
      font-size 0.37rem
      color #181818
      width 100%
      margin-top 0.07rem
      white-space nowrap
    .twoText
      line-height 0.37rem
      font-size 0.32rem
      color #bcbcbc
      width 100%
      display flex
      align-items center
      justify-content space-between
      width 100%
      margin-top 0.2rem
.customerPickingDetailed
  height 100vh
  overflow hidden
  background-color #EDF1F6
.customer-title
  height 1.12rem
  min-height 1.12rem
  width 100%
  background #ffc100
  color #333
  display flex
  justify-content center
  align-items center
  font-size 0.42rem
  font-weight bold
.Date-view
  display flex
  align-items center
  justify-content center
  width 100%
  background-color #fff
  padding 0.2rem 0
  .start-date
    margin-right 1.28rem
  .date-view-box
    display flex
    justify-content center
    flex-direction column
    align-items center
    .label
      line-height 0.48rem
      color #8e8e8e
      font-size 0.32rem
    .time
      line-height 0.64rem
      color #181818
      margin-top 0.08rem
      font-size 0.4rem
.com_footer
  width 100%
  height 1.28rem
  background-color #ffffff
  .com_footer_returnBtn
    width 2.16rem
    height 0.8rem
    background-color #ffffff
    border-radius 0.4rem
    border 1px solid #e84c3d
    font-size 0.42rem
    color #e74c3c
    display flex
    justify-content center
    align-items center
</style>



<style scoped>
.lusir-kuwei {
  display: flex;
  align-items: center;
}

.com_view.one {
  flex-direction: column;
  align-items: flex-start !important;
}

.one_top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.grounp {
  display: flex;
  align-items: flex-start !important;
}
.grounp .two {
  line-height: 0.52rem;
}
.grounp .three {
  line-height: 0.52rem;
}
.grounp .four {
  line-height: 0.52rem;
}
</style>
